
<template>
  <div id="test"> 
  </div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const TWEEN = require('@tweenjs/tween.js')
import posximgUrl from '../assets/posx.jpg'
import negximgUrl from '../assets/negx.jpg';
import posyimgUrl from '../assets/posy.jpg';
import negyimgUrl from '../assets/negy.jpg';
import poszimgUrl from '../assets/posz.jpg';
import negzimgUrl from '../assets/negz.jpg';
import pximgUrl from '../assets/px.jpg';
import nximgUrl from '../assets/nx.jpg';
import pyimgUrl from '../assets/py.jpg';
import nyimgUrl from '../assets/ny.jpg';
import pzimgUrl from '../assets/pz.jpg';
import nzimgUrl from '../assets/nz.jpg';
import arrow from '../assets/arrow.png';
import plate from '../assets/plate.png'
export default {
  name: 'test',
  data(){
      return{
        imgSrc: [posximgUrl,negximgUrl,posyimgUrl,negyimgUrl,poszimgUrl,negzimgUrl],
        box2ImgSrc:[pximgUrl,nximgUrl,pyimgUrl,nyimgUrl,pzimgUrl,nzimgUrl],
        arrow,
        plate,
      }
  },
  methods:{
      test_texture(){
        let container = document.getElementById("test");
        container.style.height = window.innerHeight + "px";
        let scene = new THREE.Scene();
        let geometry = new THREE.BoxGeometry(1000, 1000, 1000);
        //创建纹理加载器对象，可以使用图片作为几何体纹理
        let textureLoader = new THREE.TextureLoader();
        let materialArray = [];
        for (let i = 0; i < 6; i++){
            materialArray.push( new THREE.MeshBasicMaterial({
                map: textureLoader.load(this.imgSrc[i]),
                side: THREE.DoubleSide
            }));
        }
        //网格模型对象Mesh    
        let mesh = new THREE.Mesh(geometry, materialArray); 
        scene.add(mesh);
        //创建相邻的几何体
        let geometry2 = new THREE.BoxGeometry(1000, 1000, 1000);
        let materialArray2 = [];
        for (let i = 0; i < 6; i++){
            materialArray2.push( new THREE.MeshBasicMaterial({
                map: textureLoader.load(this.box2ImgSrc[i]),
                side: THREE.DoubleSide
            }));
        }
        //网格模型对象Mesh    
        let mesh2 = new THREE.Mesh(geometry2, materialArray2);
        mesh2.translateX(1001);
        scene.add(mesh2)

        let axisHelper = new THREE.AxesHelper(1000);
        scene.add(axisHelper); 
        
        let width = container.clientWidth; 
        let height = container.clientHeight; 

        let camera = new THREE.PerspectiveCamera(90, width/height, 0.1, 10000);
        camera.position.set(100,100,100); //设置相机位置
        // camera.lookAt(new THREE.Vector3(0,100,100)); //设置相机方向(指向的场景对象)
        let cameraHelper = new THREE.CameraHelper(camera);
        scene.add(cameraHelper);
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xffffff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象

         //在场景中创建一个精灵图
        let spriteMaterial = new THREE.SpriteMaterial({
           map:textureLoader.load(plate),
         })
        let spriteArrow = new THREE.Sprite(spriteMaterial);
        spriteArrow.scale.set(100, 100, 100);
        spriteArrow.position.set(500, 0, 0)
        scene.add(spriteArrow);

        // 声明鼠标位置
        let mouse = new THREE.Vector2();
        function mouseMoveEvent(event) {
            mouse.width = (event.clientX / container.clientWidth) * 2 - 1;
            mouse.height = - (event.clientY / container.clientHeight) * 2 + 1;
        }
        container.addEventListener('mousemove', mouseMoveEvent, false);
        let raycaster = new THREE.Raycaster();
        function mouseClickEvent(event) {
            event.preventDefault();
            // 射线捕捉
            raycaster.setFromCamera(mouse, camera);
            let intersects = raycaster.intersectObjects([spriteArrow]);
            if (intersects.length > 0) {
                changeScene();
            }
        }
        container.addEventListener('click', mouseClickEvent, false);
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        console.log(controls.target.x,controls.target.y,controls.target.z)
        function render(){ 
            controls.update();
            TWEEN.update();
            // camera.lookAt(new THREE.Vector3(0,100,100));
            renderer.render(scene, camera); //执行渲染操作
            requestAnimationFrame(render);
            // console.log("相机朝向" + camera.lookAt.x);
            // console.log("相机位置" + camera.position.x,camera.position.y,camera.position.z);
        }
        render();
        function changeScene() {
            // controls.target.x = 1500;
            // controls.target.y = 0;
            // controls.target.z = 0;
            // let timer = setInterval(function () {
            //     // 当垂直视野角度等于20时
            //     if (camera.fov <= 10) {
            //         // 清空定时器
            //         clearInterval(timer);
            //         // 把垂直视野角设置为50
            //         //camera.fov = 20;
            //         // 更正相机位置
            //         // camera.position.set(0, 0, 150);
            //         // 再次更新相机投影矩阵
            //         //camera.updateProjectionMatrix();
            //         // 隐藏指示箭头
            //         spriteArrow.visible = false;
            //     }
            //    // 摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。
            //     // 角度逐渐减小产生的效果是物体逐渐放大
            //     camera.fov -= 1;
            //     // 更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
            //     camera.updateProjectionMatrix();
            //     render();
            // }, 10)
            //使用tween.js实现过度效果
            let position = {
              x: camera.position.x,
              y: camera.position.y,
              z: camera.position.z,
              a: controls.target.x,
              b: controls.target.y,
              c: controls.target.z,
            };
            let tween = new TWEEN.Tween(position);
            tween.to({ x: mesh2.position.x,y:mesh2.position.y,z:mesh2.position.z,a:1500,b:0,c:0}, 5000);

            tween.onUpdate(function(object){
            camera.position.x = object.x;
            camera.position.y = object.y
            camera.position.z = object.z;
            camera.updateProjectionMatrix();
            //设置target会导致Lookat失效
            controls.target.x = object.a;
            controls.target.y = object.b;
            controls.target.z = object.c;
             
            })
            tween.start();
            tween.onComplete(function(){
            // controls.enabled = true;
            camera.lookAt(0,0,0)
            // camera.lookAt(200,200,200);
        })

            
        }
        // controls.addEventListener('change', render);//监听鼠标、键盘事件
      }
      
  }, 
  mounted () {
      this.test_texture();
 }
}
</script>

<style scope>
</style>